<template>
    <div class="model-panel">
        <!-- <canvas class="model-canvas" ref="canvas" /> -->

        <div class="model-panel-render-warp" :style="size">
            <div class="model-panel-render">
                <DesignerModelPanelRender :model="activeModel" :color="activeColor" :pieces="pieces" :activePiece="activePiece" :size="size" />
            </div>
        </div>

        <!-- <span v-show="item.canvas_name == 'Front Side - Top'" v-for="item in activeModel.mapping" :key="item.canvas_name" :style="{left: 100 * item.x / 2048 + '%',top: 100 * item.y / 2048 + '%',width: 100 * item.width / 2048 + '%',height: 100 * item.height / 2048 + '%'}" style="background:rgba(0,0,0,0.5);position: absolute;"></span> -->
        <!-- 向左按钮 -->
        <button class="model-panel-prev" @click="setActiveModel(-1)" :disabled="modelIndex == 0">
            <i class="iconfont icon-zuo"></i>
        </button>

        <!-- 向右按钮 -->
        <button class="model-panel-next" @click="setActiveModel(1)" :disabled="modelIndex == activeModels.length - 1">
            <i class="iconfont icon-you"></i>
        </button>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data () {
        return {
            fabric: null,
            scale: null,
            mask: null,
            background: null,
            size: null,
        };
    },
    computed: {
        ...mapGetters("designer", {
            activeColor: "getActiveColor",
            activeModel: "getActiveModel",
            activeModelTag: "getActiveModelTag",
            activePiece: "getActivePiece",
            models: "getModels",
            pieces: "getPieces"
        }),
        activeModels () {
            return (this.models || []).filter((m) => m.model_tag == this.activeModelTag);
        },
        modelIndex () {
            return Math.max(this.activeModels.indexOf(this.activeModel), 0);
        },
    },
    watch: {
        // activeModel () { this.init(); },
        // activeColor () { this.init(); },
    },
    methods: {
        // 切换模特图
        setActiveModel (item) {
            let index = this.modelIndex;
            let active = null;
            if (item == -1) {
                // 向前
                active = this.activeModels[index - 1] || this.activeModels[0];
            } else if (item == 1) {
                // 向右
                active = this.activeModels[index + 1] || this.activeModels[this.activeModels.length - 1];
            } else if (this.activeModels.indexOf(item) >= 0) {
                active = item;
            }

            if (active && active != this.activeModel) {
                this.$store.commit("designer/SET_ACTIVE_MODEL", active);
            }
        },

        // 初始化
        init () {
            if (!this.$el) {
                // 没有值
            } else if (!this.activeModel) {
                // 没有设计面
            } else {
                const rect = this.$el.parentNode.getBoundingClientRect();
                const min = Math.min(rect.width, rect.height);
                this.size = { width: 100 * min / rect.width + "%", height: 100 * min / rect.height + "%" };
            }
        },
    },
    mounted () {
        this.init();
        window.addEventListener("resize", this.init, false);
    },
    // 销毁
    beforeDestroy () {
        window.removeEventListener("resize", this.init, false);
    },
};
</script>

<style lang='scss' scoped>
.model-panel {
    text-align: center;
    width: 100%;
    height: 100%;
    img {
        height: 100%;
    }

    button {
        position: absolute;
        width: 24px;
        height: 24px;
        background: none;
        border: none;
        padding: 0;
        top: 50%;
        transform: translateY(-50%);
        font-weight: normal;

        &.model-panel-prev {
            left: 2px;
        }

        &.model-panel-next {
            right: 2px;
        }

        &:hover {
            color: #ea4c89;
        }

        &[disabled] {
            color: #ddd;
        }
    }
}

.model-panel-render-warp {
    position: absolute;
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    overflow: hidden;
}

.model-panel-render {
    position: absolute;
    top: -5%;
    right: -5%;
    bottom: -5%;
    left: -5%;
}

.model-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
}
</style>
